<template>
	<view>
		<u-empty text="暂无优惠券" mode="coupon" :show="orderFlag"></u-empty>
		<view v-if="!orderFlag" class="container">
			<view class="coupon blueBg" v-for="(item, index) in list" :key="index">
				<view class="coupon_left">
					<view class="coupon_left_number">
						<text>￥</text>
						<text>{{ item.price }}</text>
					</view>
					<view class="coupon_left_type">{{ item.title }}</view>
				</view>
				<view class="coupon_right">
					<view class="coupon_right_number">{{ item.desc }}</view>
					<view class="coupon_right_date">
						<text>领取后{{ item.coupon_time }}天内有效</text>
					</view>
					<!-- <view :class="item.state ? 'noUse' : 'use'" class="receive" @click.stop="getCouponHandle(item, index)">{{ item.state==false ? '立即领取' : '已领取' }}</view> -->
					<view class="receive noUse" @click.stop="getCouponHandle(item, index)">立即领取</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { coupon, getCoupon } from '@/api/user/index/index.js';
export default {
	data() {
		return {
			orderFlag: false,
			list: [
				// {
				// 	coupon_time: 5,
				// 	desc: '单笔满50.00使用',
				// 	indate: '请在领取后5天内使用',
				// 	price: '20.00',
				// 	status: 'normal',
				// 	subjectstitle: null,
				// 	title: '通用券',
				// 	use_min_price: '50.00'
				// },
				// {
				// 	coupon_time: 3,
				// 	desc: '单笔满40.00使用仅限科目二使用',
				// 	indate: '请在领取后3天内使用',
				// 	price: '10.00',
				// 	status: 'normal',
				// 	subjectstitle: '科目二',
				// 	title: '科目二新人券',
				// 	use_min_price: '40.00'
				// }
			]
		};
	},
	async onLoad() {
		let res = await coupon();
		console.log(res);
		if(res.data.constructor === Object){
			for(let k in res.data) {
			    this.list.push(res.data[k]) 
			} 
		}else{
			this.orderFlag = true;
		}
		
	},
	watch: {
		list(val) {
			if (!val.length) {
				this.orderFlag = true;
			} else {
				this.orderFlag = false;
			}
		}
	},
	methods: {
		async getCouponHandle(item, index) {
			let res = await getCoupon(item.id);
			if(res.code==1){
				uni.showToast({
					title: '领取成功！',
					icon: 'success'
				});	
				this.list.splice(index,1)
			}else{
				uni.showToast({
					title:res.msg,
					icon: 'none'
				});	
			}
		}
	}
};
</script>

<style lang="scss">
@import './css/coupon.scss';
</style>
